<template>
  <div class="credit-container">
    <div class="header">
      <h1>我的学分</h1>
      <p class="subtitle">学分记录与分析</p>
    </div>
    
    <!-- 时间范围选择器 -->
    <el-card shadow="hover" class="filter-card">
      <el-row :gutter="20" align="middle">
        <el-col :xs="24" :sm="12" :md="6">
          <div class="filter-item">
            <span class="filter-label">时间范围:</span>
            <el-select v-model="timeRange" placeholder="选择时间范围" style="width: 100%">
              <el-option
                v-for="item in timeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6" v-if="timeRange === 'custom'">
          <div class="filter-item">
            <span class="filter-label">开始日期:</span>
            <el-date-picker
              v-model="startDate"
              type="date"
              placeholder="选择开始日期"
              style="width: 100%"
            />
          </div>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6" v-if="timeRange === 'custom'">
          <div class="filter-item">
            <span class="filter-label">结束日期:</span>
            <el-date-picker
              v-model="endDate"
              type="date"
              placeholder="选择结束日期"
              style="width: 100%"
            />
          </div>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6">
          <el-button 
            type="primary" 
            :icon="Download" 
            @click="exportData"
            style="width: 100%"
          >
            导出数据
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    
    <!-- 统计概览 -->
    <el-row :gutter="20" class="stats-overview">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <el-statistic title="当前学分" :value="credit" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <el-statistic :title="`${getTimeRangeLabel()}获得学分`" :value="getStats().gainTotal" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <el-statistic :title="`${getTimeRangeLabel()}消费学分`" :value="getStats().lossTotal" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card">
          <el-statistic :title="`${getTimeRangeLabel()}净变化`" :value="getStats().netChange" />
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 学分明细 -->
    <el-card shadow="hover" class="details-card">
      <el-tabs v-model="activeTab" class="demo-tabs">
        <el-tab-pane label="数据分析" name="chart">
          <!-- 图表类型选择 -->
          <el-card shadow="never" class="chart-controls">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="chart-type-control">
                  <span class="control-label">学分类型图类型:</span>
                  <el-radio-group v-model="creditTypeChartType" size="small">
                    <el-radio-button value="pie">饼图</el-radio-button>
                    <el-radio-button value="bar">柱状图</el-radio-button>
                  </el-radio-group>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="chart-type-control">
                  <span class="control-label">获取方式图类型:</span>
                  <el-radio-group v-model="methodChartType" size="small">
                    <el-radio-button value="pie">饼图</el-radio-button>
                    <el-radio-button value="bar">柱状图</el-radio-button>
                  </el-radio-group>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="chart-type-control">
                  <span class="control-label">获取趋势图类型:</span>
                  <el-radio-group v-model="gainTrendChartType" size="small">
                    <el-radio-button value="line">折线图</el-radio-button>
                    <el-radio-button value="bar">柱状图</el-radio-button>
                  </el-radio-group>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="chart-type-control">
                  <span class="control-label">消费趋势图类型:</span>
                  <el-radio-group v-model="consumeTrendChartType" size="small">
                    <el-radio-button value="line">折线图</el-radio-button>
                    <el-radio-button value="bar">柱状图</el-radio-button>
                  </el-radio-group>
                </div>
              </el-col>
            </el-row>
          </el-card>
          
          <el-row :gutter="20" class="chart-row">
            <el-col :xs="24" :md="12">
              <div ref="creditTypeChart" class="chart-item"></div>
            </el-col>
            <el-col :xs="24" :md="12">
              <div ref="methodChart" class="chart-item"></div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="chart-row">
            <el-col :span="24">
              <div ref="gainTrendChart" class="chart-full"></div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="chart-row">
            <el-col :span="24">
              <div ref="consumeTrendChart" class="chart-full"></div>
            </el-col>
          </el-row>
          
          <el-card shadow="never" class="analysis-suggestion">
            <template #header>
              <div class="card-header">
                <span>{{ getTimeRangeLabel() }}学分分析建议</span>
              </div>
            </template>
            <p v-if="getStats().lossCount > 0">
              {{ getTimeRangeLabel() }}您有{{ getStats().lossCount }}次消费学分记录，共消费{{ getStats().lossTotal }}学分，
              建议合理规划学分使用。
            </p>
            <p v-else>{{ getTimeRangeLabel() }}您没有消费学分的记录。</p>
            
            <p>{{ getTimeRangeLabel() }}您主要通过以下方式获得学分：{{ 
              calculateMethodData()
                .sort((a, b) => b.value - a.value)
                .slice(0, 2)
                .map(item => item.name)
                .join('、') 
            }}，共获得{{ getStats().gainTotal }}学分。</p>
            
            <p>{{ getTimeRangeLabel() }}净获得学分为{{ getStats().netChange }}分。</p>
          </el-card>
        </el-tab-pane>
        
        <el-tab-pane :label="`${getTimeRangeLabel()}明细`" name="list">
          <el-table 
            :data="filteredRecords" 
            style="width: 100%" 
            stripe
            border
            height="500"
          >
            <el-table-column prop="recordTime" label="时间" :formatter="(row) => formatDate(row.recordTime)" width="180" />
            <el-table-column prop="method" label="方式" width="120" />
            <el-table-column prop="courseName" label="课程/项目">
              <template #default="{row}">
                {{ row.courseName || '无' }}
              </template>
            </el-table-column>
            <el-table-column prop="credits" label="学分变化" width="120">
              <template #default="{row}">
                <el-tag :type="row.credits > 0 ? 'success' : 'danger'" size="small">
                  {{ row.credits > 0 ? '+' : '' }}{{ row.credits }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="描述" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, nextTick, watch, computed } from 'vue'
import { creditManager } from '@/utils/credit'
import { creditService } from '@/services/creditService'
import * as echarts from 'echarts'
import {
  ElCard,
  ElTabs,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElRow,
  ElCol,
  ElTag,
  ElStatistic,
  ElSelect,
  ElOption,
  ElButton,
  ElDatePicker,
  ElRadioGroup,
  ElRadioButton
} from 'element-plus'
import { Download } from '@element-plus/icons-vue'

// 响应式数据
const credit = ref(creditManager.getCurrentCredit())
const total = ref(creditManager.getTotalCredit())
const creditRecord = ref([])
const activeTab = ref('chart')
const filteredRecords = ref([])

// 图表引用
let chartInstance = null
let methodChartInstance = null
let gainTrendChartInstance = null
let consumeTrendChartInstance = null

// 模板引用
const creditTypeChart = ref(null)
const methodChart = ref(null)
const gainTrendChart = ref(null)
const consumeTrendChart = ref(null)

// 用户选择项
const timeRange = ref('30days') // 默认30天
const startDate = ref(new Date())
const endDate = ref(new Date())
const creditTypeChartType = ref('pie') // 学分类型图表类型
const methodChartType = ref('pie') // 方法图表类型
const gainTrendChartType = ref('bar') // 获取趋势图表类型
const consumeTrendChartType = ref('bar') // 消费趋势图表类型

// 时间范围选项
const timeOptions = [
  { value: '7days', label: '最近7天' },
  { value: '30days', label: '最近30天' },
  { value: '90days', label: '最近90天' },
  { value: 'custom', label: '自定义范围' }
]

// 获取学分记录
onMounted(async () => {
  try {
    creditService.getCreditRecord((res) => {
      creditRecord.value = res.data
      filterRecords()
    })
  } catch (error) {
    console.error('获取学分记录失败:', error)
  }
})

// 监听时间范围变化
watch([timeRange, startDate, endDate], () => {
  filterRecords()
})

// 监听图表类型变化
watch([creditTypeChartType, methodChartType, gainTrendChartType, consumeTrendChartType], () => {
  if (activeTab.value === 'chart') {
    initCharts()
  }
})

// 监听标签切换
watch(activeTab, (newVal) => {
  if (newVal === 'chart') {
    initCharts()
  }
})

// 计算选定的日期范围
const dateRange = computed(() => {
  const end = new Date(endDate.value)
  end.setHours(23, 59, 59, 999) // 包含当天
  
  let start = new Date(startDate.value)
  
  switch (timeRange.value) {
    case '7days':
      start = new Date(end)
      start.setDate(end.getDate() - 6)
      break
    case '30days':
      start = new Date(end)
      start.setDate(end.getDate() - 29)
      break
    case '90days':
      start = new Date(end)
      start.setDate(end.getDate() - 89)
      break
    case 'custom':
      start = new Date(startDate.value)
      break
  }
  
  return { start, end }
})

// 过滤记录
const filterRecords = () => {
  const { start, end } = dateRange.value
  filteredRecords.value = creditRecord.value
    .filter(item => {
      const recordDate = new Date(item.recordTime)
      return recordDate >= start && recordDate <= end
    })
    .sort((a, b) => new Date(b.recordTime) - new Date(a.recordTime)) // 按时间降序排序
  
  if (activeTab.value === 'chart') {
    initCharts()
  }
}

// 初始化图表
const initCharts = () => {
  if (filteredRecords.value.length === 0) return

  nextTick(() => {
    setTimeout(() => {
      // 确保DOM元素存在
      if (!creditTypeChart.value || !methodChart.value || !gainTrendChart.value || !consumeTrendChart.value) {
        console.warn('Chart containers not ready')
        return
      }

      // 1. 学分正负分布图
      const creditTypeData = calculateCreditTypeData()
      renderCreditTypeChart(creditTypeData)
      
      // 2. 获取方式分布图
      const methodData = calculateMethodData()
      renderMethodChart(methodData)
      
      // 3. 获取学分趋势图
      const gainTrendData = calculateGainTrendData()
      renderGainTrendChart(gainTrendData)
      
      // 4. 消费学分趋势图
      const consumeTrendData = calculateConsumeTrendData()
      renderConsumeTrendChart(consumeTrendData)
    }, 100)
  })
}

// 计算学分正负数据
const calculateCreditTypeData = () => {
  const positive = filteredRecords.value.filter(item => item.credits > 0).length
  const negative = filteredRecords.value.filter(item => item.credits < 0).length
  return [
    { value: positive, name: '获得学分' },
    { value: negative, name: '消费学分' }
  ]
}

// 计算获取方式数据
const calculateMethodData = () => {
  const methodMap = new Map()
  filteredRecords.value
  .filter(item => item.credits > 0)
  .forEach(item => {
    const count = methodMap.get(item.method) || 0
    methodMap.set(item.method, count + Math.abs(item.credits))
  })
  return Array.from(methodMap.entries()).map(([name, value]) => ({ name, value }))
}

// 计算获取学分趋势数据
const calculateGainTrendData = () => {
  const { start, end } = dateRange.value
  const dateMap = new Map()
  
  // 初始化日期范围内的数据
  for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
    const dateStr = formatChartDate(d)
    dateMap.set(dateStr, { gain: 0, date: new Date(d) })
  }
  
  // 填充实际数据
  filteredRecords.value.forEach(item => {
    if (item.credits > 0) {
      const dateStr = formatChartDate(new Date(item.recordTime))
      const data = dateMap.get(dateStr) || { gain: 0 }
      data.gain += item.credits
      dateMap.set(dateStr, data)
    }
  })
  
  // 转换为数组并排序
  const sortedData = Array.from(dateMap.values()).sort((a, b) => a.date - b.date)
  
  return {
    dates: sortedData.map(item => formatChartDate(item.date)),
    gainData: sortedData.map(item => item.gain)
  }
}

// 计算消费学分趋势数据
const calculateConsumeTrendData = () => {
  const { start, end } = dateRange.value
  const dateMap = new Map()
  
  // 初始化日期范围内的数据
  for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
    const dateStr = formatChartDate(d)
    dateMap.set(dateStr, { consume: 0, date: new Date(d) })
  }
  
  // 填充实际数据
  filteredRecords.value.forEach(item => {
    if (item.credits < 0) {
      const dateStr = formatChartDate(new Date(item.recordTime))
      const data = dateMap.get(dateStr) || { consume: 0 }
      data.consume += Math.abs(item.credits)
      dateMap.set(dateStr, data)
    }
  })
  
  // 转换为数组并排序
  const sortedData = Array.from(dateMap.values()).sort((a, b) => a.date - b.date)
  
  return {
    dates: sortedData.map(item => formatChartDate(item.date)),
    consumeData: sortedData.map(item => item.consume)
  }
}

// 格式化图表日期
const formatChartDate = (date) => {
  return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
}

// 渲染学分正负图表
const renderCreditTypeChart = (data) => {
  if (chartInstance) {
    chartInstance.dispose()
  }
  
  chartInstance = echarts.init(creditTypeChart.value)
  
  const isPie = creditTypeChartType.value === 'pie'
  
  const option = {
    title: {
      text: `${getTimeRangeLabel()}学分获取/消费分布`,
      left: 'center',
      textStyle: {
        color: '#333',
        fontWeight: 'normal',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: isPie ? 'item' : 'axis',
      formatter: isPie ? '{a} <br/>{b}: {c}次 ({d}%)' : '{b}: {c}次'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: '#666'
      },
      show: isPie
    },
    xAxis: isPie ? undefined : {
      type: 'category',
      data: data.map(item => item.name),
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666',
        rotate: 45
      }
    },
    yAxis: isPie ? undefined : {
      type: 'value',
      name: '次数',
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    series: [
      {
        name: '学分类型',
        type: creditTypeChartType.value,
        radius: isPie ? '50%' : undefined,
        data: data,
        itemStyle: {
          borderRadius: isPie ? 5 : [4, 4, 0, 0],
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          color: '#333',
          position: isPie ? undefined : 'top'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ],
    color: ['#67C23A', '#F56C6C']
  }
  
  chartInstance.setOption(option)
}

// 渲染获取方式图表
const renderMethodChart = (data) => {
  if (methodChartInstance) {
    methodChartInstance.dispose()
  }
  
  methodChartInstance = echarts.init(methodChart.value)
  
  const isPie = methodChartType.value === 'pie'
  
  const option = {
    title: {
      text: `${getTimeRangeLabel()}学分获得方式分布`,
      left: 'center',
      textStyle: {
        color: '#333',
        fontWeight: 'normal',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: isPie ? 'item' : 'axis',
      formatter: isPie ? '{a} <br/>{b}: {c}学分 ({d}%)' : '{b}: {c}学分'
    },
    legend: {
      show: isPie,
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: '#666'
      }
    },
    xAxis: isPie ? undefined : {
      type: 'category',
      data: data.map(item => item.name),
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666',
        rotate: 45
      }
    },
    yAxis: isPie ? undefined : {
      type: 'value',
      name: '学分',
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    series: [
      {
        name: '获取方式',
        type: methodChartType.value,
        radius: isPie ? ['40%', '70%'] : undefined,
        avoidLabelOverlap: isPie,
        itemStyle: {
          borderRadius: isPie ? 10 : [4, 4, 0, 0],
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: isPie ? 'center' : 'top'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: isPie
        },
        data: data
      }
    ],
    color: ['#409EFF', '#67C23A', '#E6A23C', '#909399', '#F56C6C']
  }
  
  methodChartInstance.setOption(option)
}

// 渲染获取学分趋势图表
const renderGainTrendChart = (data) => {
  if (gainTrendChartInstance) {
    gainTrendChartInstance.dispose()
  }
  
  gainTrendChartInstance = echarts.init(gainTrendChart.value)
  
  const option = {
    title: {
      text: `${getTimeRangeLabel()}获取学分趋势`,
      left: 'center',
      textStyle: {
        color: '#333',
        fontWeight: 'normal',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.dates,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666',
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '学分',
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    series: [
      {
        name: '获取学分',
        type: gainTrendChartType.value,
        data: data.gainData,
        itemStyle: {
          color: '#67C23A',
          borderRadius: gainTrendChartType.value === 'bar' ? [4, 4, 0, 0] : undefined
        },
        smooth: gainTrendChartType.value === 'line',
        showSymbol: gainTrendChartType.value === 'line',
        areaStyle: gainTrendChartType.value === 'line' ? {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(103, 194, 58, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(103, 194, 58, 0.1)'
            }
          ])
        } : undefined
      }
    ]
  }
  
  gainTrendChartInstance.setOption(option)
}

// 渲染消费学分趋势图表
const renderConsumeTrendChart = (data) => {
  if (consumeTrendChartInstance) {
    consumeTrendChartInstance.dispose()
  }
  
  consumeTrendChartInstance = echarts.init(consumeTrendChart.value)
  
  const option = {
    title: {
      text: `${getTimeRangeLabel()}消费学分趋势`,
      left: 'center',
      textStyle: {
        color: '#333',
        fontWeight: 'normal',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.dates,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666',
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '学分',
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    series: [
      {
        name: '消费学分',
        type: consumeTrendChartType.value,
        data: data.consumeData,
        itemStyle: {
          color: '#F56C6C',
          borderRadius: consumeTrendChartType.value === 'bar' ? [4, 4, 0, 0] : undefined
        },
        smooth: consumeTrendChartType.value === 'line',
        showSymbol: consumeTrendChartType.value === 'line',
        areaStyle: consumeTrendChartType.value === 'line' ? {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(245, 108, 108, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(245, 108, 108, 0.1)'
            }
          ])
        } : undefined
      }
    ]
  }
  
  consumeTrendChartInstance.setOption(option)
}

// 获取时间范围标签
const getTimeRangeLabel = () => {
  switch (timeRange.value) {
    case '7days': return '最近7天'
    case '30days': return '最近30天'
    case '90days': return '最近90天'
    case 'custom': return '选定时间段'
    default: return '最近30天'
  }
}

// 计算统计信息
const getStats = () => {
  const gainRecords = filteredRecords.value.filter(item => item.credits > 0)
  const lossRecords = filteredRecords.value.filter(item => item.credits < 0)
  
  return {
    gainCount: gainRecords.length,
    gainTotal: gainRecords.reduce((sum, item) => sum + item.credits, 0),
    lossCount: lossRecords.length,
    lossTotal: lossRecords.reduce((sum, item) => sum + Math.abs(item.credits), 0),
    netChange: gainRecords.reduce((sum, item) => sum + item.credits, 0) - 
               lossRecords.reduce((sum, item) => sum + Math.abs(item.credits), 0)
  }
}

// 格式化日期
const formatDate = (dateString) => {
  return new Date(dateString).toLocaleString()
}

// 导出数据为CSV
const exportData = () => {
  const headers = ['时间', '方式', '课程/项目', '学分变化', '描述']
  const csvContent = [
    headers.join(','),
    ...filteredRecords.value.map(item => [
      formatDate(item.recordTime),
      item.method,
      item.courseName || '无',
      item.credits,
      item.description || ''
    ].map(field => `"${field}"`).join(','))
  ].join('\n')
  
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  const url = URL.createObjectURL(blob)
  
  link.setAttribute('href', url)
  link.setAttribute('download', `学分记录_${new Date().toLocaleDateString()}.csv`)
  link.style.visibility = 'hidden'
  
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 组件卸载时销毁图表
onUnmounted(() => {
  if (chartInstance) chartInstance.dispose()
  if (methodChartInstance) methodChartInstance.dispose()
  if (gainTrendChartInstance) gainTrendChartInstance.dispose()
  if (consumeTrendChartInstance) consumeTrendChartInstance.dispose()
})
</script>

<style scoped>
.credit-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  color: #303133;
  font-size: 28px;
  margin-bottom: 8px;
}

.subtitle {
  color: #909399;
  font-size: 14px;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-label {
  font-size: 14px;
  color: #606266;
}

.stats-overview {
  margin-bottom: 20px;
}

.stat-card {
  height: 100%;
  text-align: center;
  margin-bottom: 20px;
}

:deep(.el-statistic__content) {
  font-size: 24px;
  font-weight: bold;
}

:deep(.el-statistic__head) {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.details-card {
  margin-top: 20px;
}

.chart-controls {
  margin-bottom: 20px;
}

.chart-type-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.control-label {
  font-size: 14px;
  color: #606266;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-item {
  width: 100%;
  height: 400px;
  min-height: 300px;
}

.chart-full {
  width: 100%;
  height: 400px;
  min-height: 300px;
}

.analysis-suggestion {
  margin-top: 20px;
}

.analysis-suggestion p {
  margin-bottom: 10px;
  line-height: 1.6;
  color: #606266;
}

.card-header {
  font-weight: bold;
  color: #303133;
}

.demo-tabs {
  padding: 0 10px;
}

:deep(.el-tabs__header) {
  margin: 0;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  height: 50px;
  line-height: 50px;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

@media (max-width: 768px) {
  .stats-overview .el-col {
    margin-bottom: 0;
  }
  
  .chart-row .el-col {
    margin-bottom: 20px;
  }
  
  .chart-item, .chart-full {
    height: 300px;
  }
  
  .filter-item {
    margin-bottom: 15px;
  }
  
  .chart-type-control {
    margin-bottom: 15px;
  }
}
</style>